<template>
 <div class="editPage__video">
     <el-form  :model="list" label-width="120px">
        <el-form-item></el-form-item>
      <!-- <el-form-item label-width="100px" label="教师ID：" prop="teacher_id">
        <el-input v-model.number="list.teacher_id" style="width: 400px"> </el-input>
      </el-form-item> -->
       <div class="title">视频设置</div>
    <div class="img__con">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=course"
          :headers="headers"
          :show-file-list="true"
          :data="uploadImgData"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-progress="uploadVideoProcess"
        >
        <video width="100%" v-if="list.imageUrl" controls="controls" :key="menuKey">
          <source :src="list.imageUrl" type="video/mp4" />
        </video>
          <!-- <img v-if="list.cover_picture" :src="list.cover_picture" class="avatar" /> -->
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <el-progress
          v-if="videoFlag == true"
          type="line"
          :percentage="videoUploadPercent"
          style="margin-top: 30px"
        ></el-progress>
        </el-upload>
        <p>
        说明: 视频格式为mp4格式，每个视频大小不超过300m
      </p>
        </div>
        <el-form-item>
			  <el-button type="primary" @click="onSubmit">上传</el-button>
			</el-form-item>
      </el-form>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
    data(){
      return{
        list:{

        },
        headers: {
	        'Authorization':getToken()
	      },
    uploadImgData: { busiName: 32 },
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
      menuKey: 1, // 用来强制刷新
      videoFlag: false,  // 进度条相关的
      videoUploadPercent: 0,  // 进度条相关的
      }
    },
    methods:{
     onSubmit() {
      var vm = this
      addhealcourse.adcourse(vm.adcourseSet)
      .then(function(resp) {
        	this.$message({
        	  message: '添加成功!',
        	  type: 'success'
          })

        this.$router.go(-1)
      })
      .catch(function(error) {
        console.log('--------------------asdsa');
        console.log('asdsaddddd',this.adcourseSet);
      			 vm.$message.error('添加失败')
      })
    },
       handleAvatarSuccess(res, file) {
         // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      ++this.menuKey;
        this.list.cover_picture = res.data.picUrl;
        console.log("上传图片成功",res)
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        //  console.log("beforeAvatarUpload",file)
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
        const isMp4 = file.type === "video/mp4";
      // 限制文件最大不能超过 300M
      const isLt2M = file.size / 1024 / 1024 < 300;
        if (!isMp4) {
        this.$message.error("视频只能是mp4格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 300MB!");
      }
      return isMp4 && isLt2M;

      },
      //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    },
    }
}
</script>

<style lang="scss" scoped>
.editPage__video {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .avatar {
    width: 350px;
    height: auto;
    display: block;
  }
  .title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .img__con {
    .el-button {
      width: 100%;
      margin: 10px 0 20px 0;
    }
  }
}
</style>

